import {defineStore} from "pinia";
import axios from "axios";
import {nanoid} from "nanoid";
import {reactive} from "vue";

// 第一种写法, 选项式
// const useTalkStore = defineStore('talk', {
//     state: () => ({
//         talkList: JSON.parse(localStorage.getItem('talkList') as string ) || []
//     }),
//     actions: {
//         async getATalk() {
//             // 连续两次解构赋值, 并且重命名
//             let {data: {content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
//             let obj = {id: nanoid(), title}
//             this.talkList.unshift(obj)
//         }
//     }
// })
//
// export default useTalkStore

// 第二种写法, 组合式
const useTalkStore = defineStore('talk', ()=>{
    // talkList 就是state
    let talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string ) || [])
    async function getATalk() {
        // 连续两次解构赋值, 并且重命名
        let {data: {content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        let obj = {id: nanoid(), title}
        talkList.unshift(obj)
    }
    return {talkList, getATalk}
})

export default useTalkStore

